<template>
  <div class="app-container">
    <el-tabs v-model="activeName" style="padding-left:30px">
      <!-- 经营许可 -->
      <el-tab-pane label="经营许可" name="first">
        <div class="divBar" />
        <h5 class="titleInfo">企业/个人工商户信息</h5>

        <div class="title">
          <el-radio-group v-model="enp_type" disabled>
            <el-radio :label="2">企业</el-radio>
            <el-radio :label="1">个人工商户信息</el-radio>
          </el-radio-group>
        </div>
        <el-form v-if="flag" ref="form" class="form" :model="form" label-width="180px" disabled>
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" />
          </el-form-item>

          <el-form-item label="法定代表人" prop="enp_user">
            <el-input v-model="form.enp_user" />
          </el-form-item>

          <el-form-item label="营业执照截止时间" prop="enp_time_type">
            <el-radio-group v-model="form.enp_time_type">
              <el-radio :label="1">长期</el-radio>
              <el-radio :label="2">时间</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="form.enp_time_type == 2"
              v-model="form.enp_lose_time"
              value-format="yyyy-MM-dd"
              type="date"
            />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              :file-num="3"
              :file-list="fileList1"
              :size-number="4"
              disabled
            />
          </el-form-item>

          <el-form-item label="法人证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="法人证件号" prop="user_number">
            <el-input v-model="form.user_number" />
          </el-form-item>

          <el-form-item label="法人证件照正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
          </el-form-item>
          <el-form-item label="证件照背面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
          </el-form-item>
          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" />
          </el-form-item>
        </el-form>
        <el-form v-else ref="form" class="form" :model="form" disabled label-width="180px">
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" />
          </el-form-item>

          <el-form-item label="经营者" prop="enp_user">
            <el-input v-model="form.enp_user" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              :file-num="3"
              :file-list="fileList1"
              disabled
              :size-number="4"
            />
          </el-form-item>

          <el-form-item label="证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="证件号" prop="user_number">
            <el-input v-model="form.user_number" />
          </el-form-item>

          <el-form-item label="证件照片正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
          </el-form-item>

          <el-form-item label="证件照片反面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
          </el-form-item>

          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 基本资料 -->
      <el-tab-pane label="基本资料" name="second">
        <div class="divBar" />
        <h5 class="titleInfo">基础信息</h5>
        <el-form ref="form4" class="form" :model="form4" disabled label-width="150px">
          <el-row>
            <el-col :span="9">
              <el-form-item label="姓名" prop="legal_person">
                <el-input v-model="form4.legal_person" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人手机号" prop="recomend_phone">
                <el-input v-model="form4.recomend_phone" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form4.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人姓名" prop="recomend_user">
                <el-input v-model="form4.recomend_user" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form4.email" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="签约分公司" prop="company_name">
                <el-input v-model="form4.company_name" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="证件类型" prop="identity_type">
                <el-select v-model="form4.identity_type">
                  <el-option
                    v-for="item in cardOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="签约身份" prop="level">
                <el-radio-group v-model="form4.level">
                  <el-radio :label="2">特约授权经销商</el-radio>
                  <el-radio :label="3">高级授权经销商</el-radio>
                  <el-radio :label="7">普通合伙人授权经销商</el-radio>
                  <el-radio :label="8">高级合伙人授权经销商</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="证件号" prop="identity">
                <el-input v-model="form4.identity" />
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="常驻地址" prop="daily_address">
                <el-cascader v-model="form4.daily_address" :options="twoOptions" />
              </el-form-item>
            </el-col>
            <el-row>
              <el-col :span="9">
                <el-form-item label="证件照片正面" prop="identity_img">
                  <newUpload
                    ref="uploadImg4"
                    :file-num="1"
                    :file-list="fileList4"
                    :size-number="2"
                  />
                  <!-- <p class="msgText">上传证件正面</p> -->
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="收货地址" prop="goods_address">
                  <el-input v-model="form4.goods_address" type="textarea" :rows="3" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="24">
              <el-form-item label="证件照片反面" prop="identity_back_img">
                <newUpload ref="uploadImg5" :file-num="1" :file-list="fileList5" :size-number="2" />
                <!-- <p class="msgText">上传证件背面</p> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="divBar" />
        <h5 class="titleInfo">门店信息</h5>
        <el-form ref="form1" class="form" :model="form1" label-width="150px" disabled>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店名称" prop="name">
                <el-input v-model="form1.name" :rows="1" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="门店分类" prop="cate">
            <!-- <el-cascader v-model="form1.cate_name" :options="shopCate"  /> -->
            <el-select v-model="form1.cate" placeholder="请选择">
              <el-option
                v-for="item in shopCate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主营业务" prop="main_business">
            <el-cascader
              v-model="form1.main_business"
              :options="businessCate"
              :show-all-levels="false"
            />
          </el-form-item>

          <el-row>
            <el-col :span="8">
              <el-form-item label="门店详细地址" prop="address">
                <el-cascader v-model="selectedOptions" :options="options" />
                <el-input v-model="form1.address" type="textarea" :rows="2" style="margin:20px 0" />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-show="isShow" id="container" />
          <el-form-item label="营业电话" prop="business_phone_one">
            <el-input v-model="form1.business_phone_one" />
          </el-form-item>

          <el-form-item label="营业电话2" prop="business_phone_two">
            <el-input v-model="form1.business_phone_two" />
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="营业时间" prop="business_time">
                <el-time-picker
                  v-model="form1.business_time"
                  is-range
                  value-format="HH:mm"
                  align="center"
                  range-separator="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="门店公告" prop="desc">
                <el-input v-model="form1.desc" type="textarea" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item>
            <el-radio
              v-model="offensive"
              :label="3"
              @click.native.prevent="clickitem(3)"
            >我声明，此页面所填写内容均真实有效，特别是经营地址为店铺最新可联系到的地址。同时可以作为行政机关和司法机关送达法律文件的地址。</el-radio>
          </el-form-item>-->

          <!-- <el-form-item>
            <el-button
              :disabled="btnDisable"
              style="margin:30px 0"
              type="primary"
              @click="submitCheck('form1','form4')"
            >提交审核</el-button>
          </el-form-item>-->
        </el-form>
      </el-tab-pane>

      <!-- 门店环境 -->
      <el-tab-pane label="门店环境" name="third">
        <shopPic />
      </el-tab-pane>

      <!-- 特色服务 -->
      <el-tab-pane label="特色服务" name="fourth">
        <shopTese />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/shopImgUp";
import shopPic from "@/views/shopMange/shoppic";
import shopTese from "@/views/shopMange/shopTese";
import axios from "axios";

import { getPro, getCate, getShopData } from "@/api/shopMange";

export default {
  components: { newUpload, shopPic, shopTese },
  data() {
    return {
      flag: true,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      activeName: "first",
      btnDisable: true,
      enp_type: 2,
      form: {
        user_type: "",
        enp_title: "",
        enp_code_type: 0,
        bank_num: "",
        bank_name: "",
        bank_user: "",
        enp_user: "",
        enp_time_type: "",
        enp_lose_time: "",
        user_number: "",
        enp_img: [],
        user_front_img: "",
        user_verso_img: "",
      },
      form1: {
        cate: "",
        name: "",
        address: "",
        business_phone_one: "",
        business_phone_two: "",
        business_time: [],
        main_business_id: "",
        main_business: [],
        lng: "",
        lat: "",
      },
      form4: {
        legal_person: "",
        email: "",
        phone: "",
        recomend_user: "",
        recomend_phone: "",
        level: 1,
        company_name: "",
        daily_address: [],
        goods_address: "",
        identity_img: "",
        identity_back_img: "",
        identity_type: "",
        identity: "",
      },
      address: "",
      typeOption: [
        {
          value: 0,
          label: "大陆",
        },
        {
          value: 1,
          label: "香港来往大陆通行证",
        },
        {
          value: 2,
          label: "澳门来往大陆通行证",
        },
        {
          value: 3,
          label: "台湾来往大陆通行证",
        },
        {
          value: 4,
          label: "外籍",
        },
      ],
      cardOption: [
        {
          value: 1,
          label: "港澳来往大陆通行证",
        },
        {
          value: 2,
          label: "台湾来往大陆通行证",
        },
        {
          value: 3,
          label: "护照",
        },
        {
          value: 4,
          label: "身份证",
        },
      ],
      options: [],
      shopCate: [],
      businessCate: [],
      twoOptions: [],
      selectedOptions: [],

      isShow: false, // 地图显示
      banknum: true, // 银行信息验证
    };
  },
  computed: {
    // isSource:function () {
    //   if(this.source == 3 && (this.check_status==0||this.check_status==2)){
    //     return false
    //   }
    // //  else if(this.source == 3 && (this.check_status==1||this.check_status==3)){
    // //     return true
    //   // }
    //   else{
    //     return true;
    //   }
    // },
    // isCheck: function() {
    //   //表单是否可编辑
    //   if(this.check_status==1){
    //     return true;
    //   } else if (this.check_status==3&&this.update_status == 1 ) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
    // activeDisabled(){
    //   if(this.source == 3){
    //     if(this.status == 0 || this.status == 2){
    //       return true
    //     }else{
    //       return false
    //     }
    //   }else{
    //     return false
    //   }
    // }
  },
  watch: {
    enp_type: function (val) {
      if (val == 2) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },

    flag(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1);
          this.$refs.uploadImg2.getLength(this.fileList2);
          this.$refs.uploadImg3.getLength(this.fileList3);
          this.$refs.uploadImg4.getLength(this.fileList4);
          this.$refs.uploadImg5.getLength(this.fileList5);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1);
          this.$refs.uploadImg2.getLength(this.fileList2);
          this.$refs.uploadImg3.getLength(this.fileList3);
          this.$refs.uploadImg4.getLength(this.fileList4);
          this.$refs.uploadImg5.getLength(this.fileList5);
        });
      }
    },
  },
  created() {
    this.getArea();
    this.getShopCate();
    this.shuangdjShop();
  },
  mounted() {
    this.getMsg();
  },
  methods: {
    // 获取信息
    getMsg() {
      const id = this.$route.query.id;
      // console.log(id)
      getShopData({ shop_id: id }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          const ImgUrl = "http://mmkappnew.oss-cn-beijing.aliyuncs.com/";
          const data = res.data.data;
          // 经营许可
          this.update_status = data.update_status;
          this.check_status = data.check_status;
          // localStorage.setItem('update_status', this.update_status)
          // localStorage.setItem('check_status', this.check_status)
          this.enp_type = data.enp_type;
          this.form.bank_name = data.bank_name;
          this.form.bank_num = data.bank_num;
          this.form.bank_user = data.bank_user;
          this.form.enp_user = data.enp_user;
          this.form.enp_code_type = data.enp_code_type;
          this.form.enp_code = data.enp_code;
          this.form.enp_title = data.enp_title;
          this.form.user_type = data.user_type;
          // console.log(data.user_type)
          this.form.user_number = data.user_number;
          this.form.enp_time_type = data.enp_time_type;
          this.form.enp_lose_time = data.enp_lose_time;

          // 图片
          if (data.enp_img[0]) {
            const enp_img = data.enp_img.map((item) => {
              return { url: ImgUrl + item };
            });
            this.fileList1 = enp_img;
          }
          if (data.user_front_img) {
            this.fileList2 = [{ url: ImgUrl + data.user_front_img }];
          }
          if (data.user_verso_img) {
            this.fileList3 = [{ url: ImgUrl + data.user_verso_img }];
          }
          this.form.user_verso_img = data.user_verso_img;
          this.form.user_front_img = data.user_front_img;
          this.form.enp_img = data.enp_img;
          this.$nextTick(() => {
            this.$refs.uploadImg1.getLength(this.fileList1);
            this.$refs.uploadImg2.getLength(this.fileList2);
            this.$refs.uploadImg3.getLength(this.fileList3);
          });

          // 个人信息
          this.form4.company_name = data.company_name;
          this.form4.level = data.level;
          this.form4.phone = data.phone;
          this.form4.legal_person = data.legal_person;
          this.form4.email = data.email;
          this.form4.recomend_user = data.recomend_user;
          this.form4.recomend_phone = data.recomend_phone;
          this.form4.daily_address = data.daily_address;
          // console.log(data.daily_address)
          this.form4.goods_address = data.goods_address;
          this.form4.identity_type = data.identity_type;
          if (data.identity_img) {
            this.fileList4 = [{ url: ImgUrl + data.identity_img }];
          }
          if (data.identity_back_img) {
            this.fileList5 = [{ url: ImgUrl + data.identity_back_img }];
          }
          this.form4.identity_img = data.identity_img;
          this.form4.identity_back_img = data.identity_back_img;
          this.form4.identity = data.identity;
          this.$nextTick(() => {
            this.$refs.uploadImg4.getLength(this.fileList4);
            this.$refs.uploadImg5.getLength(this.fileList5);
          });

          // 门店信息
          this.form1.name = data.name;
          this.form1.desc = data.desc;
          this.form1.address = data.address;
          this.form1.main_business_id = data.main_business_id;
          this.form1.main_business = [
            Number(String(data.main_business_id).split("")[0]),
            data.main_business_id,
          ];
          this.form1.business_time = data.business_time;
          this.form1.business_phone_one = data.business_phone_one
            .split("-")
            .join("");
          this.form1.business_phone_two = data.business_phone_two
            .split("-")
            .join("");
          this.form1.cate = data.cate;
          // this.form1.business_time = [data.business_time];
          this.form1.province = data.province;
          this.form1.city = data.city;
          this.form1.district = data.district;
          this.form1.lng = data.lng;
          this.form1.lat = data.lat;
          if (data.province) {
            this.selectedOptions = [data.province, data.city, data.district];
          }
          if (data.lng) {
            this.getMap({ lng: data.lng, lat: data.lat });
          }
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
    // 地图获取显示
    getMap(e) {
      this.isShow = true;
      var map = new AMap.Map("container", {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15, // 初始化地图层级
        center: [e.lng, e.lat], // 初始化地图中心点
      });
      var marker = new AMap.Marker({
        position: [e.lng, e.lat], // 位置
      });

      map.add(marker);
    },
    // 省市区
    getArea() {
      getPro().then((res) => {
        const newArr = [];
        // console.log(res)
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach((item2) => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label,
              });
            });
          }
        });
        this.options = res.data;
        this.twoOptions = newArr;
      });
    },

    // 获取门店分类
    getShopCate() {
      getCate().then((res) => {
        const newArr = [];
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
        });
        this.shopCate = newArr;
      });
    },

    // 获取爽到家主营业务
    shuangdjShop() {
      axios
        .post(`http://basicts.yuepinyuemei.com/mmk/shuangdj/shop/business`)
        .then((res) => {
          if (res.data.code == 0) {
            const newArr = [];
            // console.log(res)
            res.data.data.dataList.forEach((item1, index) => {
              newArr.push({
                value: item1.mainBusinessId,
                label: item1.mainBusinessName,
              });
              if (item1.mainBusinessList != null) {
                newArr[index]["children"] = [];
                item1.mainBusinessList.forEach((item2) => {
                  newArr[index]["children"].push({
                    value: item2.mainBusinessId,
                    label: item2.mainBusinessName,
                  });
                });
                this.businessCate = newArr;
              }
            });
          } else {
          }
        });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px !important;
}
#container {
  width: 350px;
  height: 350px;
  margin: 0 0 30px 150px;
}
.text {
  color: #444;
  font-size: 12px;
  font-weight: 400;
}
.el-range-editor--medium.el-input__inner {
  width: 350px;
}
.title {
  margin-left: 150px;
  margin-bottom: 20px;
}
.titles {
  /* margin-left: 150px; */
  margin-bottom: 20px;
}
.msgText {
  width: 370px;
  /* height: 30px; */
  color: #444;
  font-weight: 400;
  /* line-height: 30px; */
}
/* 服务审核中信息样式 */
.serviceInfo {
  display: block;
  padding: 20px;
  font-size: 30px;
  color: orange;
}
.dialogtext {
  text-align: center;
  line-height: 36px;
  height: 36px;
}
</style>
